<template>
  <div :class="prefixCls+'-content'">
    <div :class="prefixCls+'-content-head'" v-if="$slots.head">
      <slot name="head"></slot>
    </div>
    <div
      :class="[`${prefixCls}-size-${size}`,prefixCls+'-group']"
      :style="{width:width,height:height}"
      @mouseover="handleMouseOver"
      @mouseout="handleMouseOut"
    >
      <div :class="[prefix,`${prefixCls+'-prefix'}`]" :style="{fontSize:prefixIconSize}">
        <i></i>
      </div>
      <input
        ref="input"
        :type="showPassword?(changeType?'text':'password'):type"
        :value="value"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :placeholder="placeholder"
        :name="name"
        :maxlength="maxlength"
        :required="required"
        :autofocus="autofocus"
        :autocomplete="autocomplete"
        @focus="inputFocus"
        @blur="inputBlur"
        @keyup.enter="handleKeyUpEnter"
        @input="handleInput"
        :class="[prefixCls,
        isfoucs?'vbestui-input-foucs':'',
        disabled?'vbestui-input-disabled':'',
        round?'vbestui-input-round':'',
        clearable?'vbestui-input-padding-suffix':'',
        isSearch?'vbestui-input-padding-sousuo':'',
        ]"
        :style="{paddingLeft:prefix!=''?paddingLeft:'',paddingRight:suffix!=''?paddingRight:''}"
      />
      <div :class="prefixCls+'-icon'" v-if="suffix==''" @click="handleIconClick">
        <i class="vbestui-iconfont icon-guanbi" v-if="clearable&&value!=''" v-show="isShowIcon" @click="inputEmpty"></i>
        <i
          class="vbestui-iconfont icon-yanjing"
          v-if="isShowPassword"
          v-show="isShowIcon"
          @click="togglePassword"
          :class="[changeType?`${prefixCls}-icon-yanjing`:'']"
        ></i>
        <i
          class="vbestui-iconfont icon-sousuo vbestui-icon-sousuo"
          v-if="isSearch"
          @click="handleSearchClick"
        ></i>
      </div>
      <div
        :class="[suffix,prefixCls+'-icon']"
        v-else
        @click="handleIconClick"
        :style="{fontSize:suffixIconSize}"
      >
        <i></i>
      </div>
    </div>

    <div :class="prefixCls+`-content-footer`" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-input";
export default {
  name: "BInput",
  props: {
    type: {
      validator(value) {
        return oneOf(value, [
          "text",
          "password",
          "url",
          "email",
          "date",
          "number",
          "tel",
        ]);
      },
      default: "text",
    },
    size: {
      validator(value) {
        return oneOf(value, ["large", "default", "small"]);
      },
      default: "default",
    },
    round: {
      type: Boolean,
      default: false,
    },
    search: {
      //搜索框
      type: Boolean,
      default: false,
    },
    prefix: {
      type: String,
      default: "",
    },
    prefixIconSize: {
      type: String,
      default: "",
    },
    suffix: {
      type: String,
      default: "",
    },
    suffixIconSize: {
      //input尾部图标大小
      type: String,
      default: "",
    },
    clearable: {
      //是否显示清空按钮
      type: Boolean,
      default: false,
    },
    showPassword: {
      //是否显示查看密码按钮
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      //是否只读
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    value: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    maxlength: {
      type: Number,
      default: null,
    },
    required: {
      type: Boolean,
      default: false,
    },
    autofocus: {
      type: Boolean,
      default: false,
    },
    autocomplete: {
      type: String,
      default: "off",
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    paddingLeft: {
      type: String,
      default: "25px",
    },
    paddingRight: {
      type: String,
      default: "25px",
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      isfoucs: false,
      changeType: false, //用于点击查看密码按钮时修改Input类型
      isShowIcon: false, //用于鼠标经过离开显示隐藏图标
    };
  },
  computed: {
    isShowPassword() {
      return this.showPassword && this.type == "password";
    },
    isSearch() {
      return (
        this.search &&
        !this.clearable &&
        !this.showPassword &&
        this.type != "password"
      );
    },
  },
  methods: {
    /**暴漏的方法 */
    /**手动获取焦点 */
    focus() {
      this.$refs.input.focus();
    },
    /**手动失去焦点 */
    blur() {
      this.$refs.input.blur();
    },
    handleIconClick() {
      this.$emit("click");
    },
    inputFocus() {
      this.isfoucs = true;
      this.$emit("focus");
    },
    inputBlur() {
      this.isfoucs = false;
      this.$emit("blur");
    },
    handleInput(e) {
      // console.log(e.target.value);
      this.$emit("input", e.target.value);
      this.$emit("change", e);
    },
    /**清空input */
    inputEmpty() {
      this.$emit("input", "");
      this.$emit("clear");
    },
    /**查看密码 */
    togglePassword() {
      this.changeType = !this.changeType;
      this.$emit("togglePassword");
    },
    /**点击搜索按钮 */
    handleSearchClick() {
      this.$emit("search");
    },
    /**鼠标经过输入框 */
    handleMouseOver() {
      this.isShowIcon = true;
    },
    handleMouseOut() {
      this.isShowIcon = false;
    },
    /**释放回车键触发 */
    handleKeyUpEnter(e) {
      this.$emit("keyupEnter", e);
    },
  },
  watch:{
    value(){
      /**对密码框查看密码时输入监听，查看时输入切换为密码框 */
      if(this.type==='password'&&this.changeType==true){
        this.changeType=false;
      }
      /**对设置最大长度进行监听，超过长度时提供回调 */
      if(this.maxlength!=null&&this.value.length>=this.maxlength){
        this.$emit('inhibiting',this.value,this.maxlength);
      }
    }
  },
};
</script>